<div id="doc-title-side-div" class="bbd-panel"><h3 class="bbd-panel-title" style="font-weight: bold">目录</h3>
    <div class="bbd-panel-main" style="font-size: small">
        <div id="doc-title-side"></div>
    </div>
</div>
<script>

  function randomCoding () {
    const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    let idvalue = `bbd_${parseInt(Math.random() * 1000)}_`
    const n = 6
    for (var i = 0; i < n; i++) {
      idvalue += arr[Math.floor(Math.random() * 26)]
    }

    return idvalue
  }

  window.onload = function () {
    let titlediv = ''
    let headers = jQuery('#article_content :header')
    if (headers.length === 0) {
      jQuery('#doc-title-side-div').css('display', 'none')
    } else {
      for (let header of headers) {
        let tagName = header.tagName
        let tagspace = '<span style="font-weight: bolder">-</span>&nbsp;'
        switch (tagName) {
          case 'H1':
            break
          case 'H2':
            tagspace = '&nbsp;&nbsp;' + tagspace
            break
          case 'H3':
            tagspace = '&nbsp;&nbsp;&nbsp;' + tagspace
            break
          case 'H4':
            tagspace = '&nbsp;&nbsp;&nbsp;&nbsp;' + tagspace
            break
          case 'H5':
            tagspace = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + tagspace
            break
          case 'H6':
            tagspace = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + tagspace
            break
        }
        let title = tagspace + header.innerText.substring(0, 15)
        console.log(title)
        let id = header.id
        if (!id) {
          {#jQuery('#doc-title-side-div').css('display', 'none')#}
          {#break#}
          header.setAttribute('id', randomCoding())
          id = header.id
        }
        titlediv += ('<a style=\'color: black\' href=\'#' + id + '\'>' + title + '</a><br/>')
      }
    }

    jQuery('#doc-title-side').append(titlediv)

  }
</script>